
/*
清除浮动, 两种方式
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。(after伪元素也是这个原理)
其二，通过设置父元素 overflow 或者display：table 等属性来闭合浮动(触发BFC)。
*/

/* 在需要清除浮动的地方添加 div或者br */
.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}

/* 父层添加class clearfix 1 */
.clearfix:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* 父层添加class clearfix 2 */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}
.clearfix { 
	*zoom: 1;
}

/*
上面的.clearfix存在一个外边距重叠问题.
垂直上外边距margin-top在IE6，IE7下不会重叠叠加，也就是说容器的内部元素的外边距margin-top是应用在容器的上边界，margin-top在容器的内部，而非作用于容器外部的元素。应用margin-top的元素与容器之间有距离；
而其它标准浏览器则会重叠叠加，即margin-top是作用于容器外部的元素，而不是作用于容器的上边界，应用margin-top的元素与容器之间没有距离。
*/
/* 改良版, 无外边距重叠问题 */
.clearfix:before,
.clearfix:after {
  content: '\20';
  display: block;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* bootstrap.css 上copy的 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

/* 触发BFC/hasLayout, 还有其他触发方式*/
.clearfix {
	overflow: auto;
	_height: 1%
}
.clearfix {
	overflow: hidden;
	_zoom: 1;
}
